<template>
	<view class="home-swiper">
		<view class="home-desc">
			<view class="title-text">第18届亚洲品牌盛典峰会</view>
			<view class="desc-text">大连诺众投资咨询有限公司</view>
			<view class="desc-text">荣获“2023亚洲品牌500强”称号</view>
			<view class="button-view">了解一下</view>
		</view>
		<view class="swiper-view">
			<swiper class="swiper-css">
				<swiper-item>
					<image src="/static/Sign-bg.png" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/Sign-bg.png" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-button">
				<view class="button-view button-active">
					<i class="el-icon-arrow-left"></i>
				</view>
				<view class="button-view">
					<i class="el-icon-arrow-right"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HomeSwiper",
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.home-swiper {
		width: 100%;
		@extend .row-between;

		.home-desc {
			width: calc(100% / 2);
			height: 500px;
			@extend .column;
			align-items: flex-start;
			padding-left: 13%;
			background: #781C18;

			.title-text {
				width: 100%;
				font-size: 44px;
				color: #FFFFFF;
			}

			.desc-text {
				font-size: 18px;
				color: #FFFFFF;
				margin-top: 5px;
			}

			.button-view {
				width: 128px;
				height: 48px;
				@extend .column;
				border: 1px solid #FFFFFF;
				font-size: 16px;
				color: #FFFFFF;
				margin-top: 17px;
			}
		}

		.swiper-view {
			width: calc(100% / 2);
			height: 500px;
			position: relative;

			.swiper-css {
				width: 100%;
				height: 100%;

				.swiper-image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-button {
				position: absolute;
				left: 0;
				bottom: 0;
				@extend .row;

				.button-view {
					width: 62px;
					height: 62px;
					@extend .column;
					background: rgba(255, 255, 255, 0.6);
				}

				.button-active {
					background: #FFFFFF;
					color: #781C18;
				}
			}
		}
	}
</style>